import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { File } from '@zendeskgarden/react-forms';
import { Progress } from '@zendeskgarden/react-loaders';
import { FileStory } from './stories/FileStory';
import README from '../README.md';

<Meta
  title="Packages/Forms/File"
  component={File}
  subcomponents={{
    'File.Close': File.Close,
    'File.Delete': File.Delete,
    Progress
  }}
/>

# API

<ArgsTable />

# Demo

<Canvas>
  <Story
    name="File"
    args={{
      children: 'file.txt',
      closeAriaLabel: 'Close',
      deleteAriaLabel: 'Delete'
    }}
    argTypes={{
      tabIndex: { control: 'number' },
      hasClose: { name: 'File.Close', control: 'boolean', table: { category: 'Story' } },
      hasDelete: { name: 'File.Delete', control: 'boolean', table: { category: 'Story' } },
      value: { control: { type: 'range', min: 0, max: 100 }, table: { category: 'Progress' } },
      closeAriaLabel: { name: 'aria-label', table: { category: 'File.Close' } },
      deleteAriaLabel: { name: 'aria-label', table: { category: 'File.Delete' } }
    }}
  >
    {args => <FileStory {...args} />}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
